<%@page contentType="text/html" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<%@taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="<%=application.getContextPath()%>/nresources/ued/css/all-src.css" type="text/css" rel="stylesheet"/>
    <title>用户登录统计</title>
    <%@include file="/WEB-INF/ibnms/common/jqgrid.jsp" %>
    <%@include file="/WEB-INF/ibnms/common/formValidation.jsp" %>
    <link href="<%=application.getContextPath()%>/0/libs/pure/pure.css" type="text/css" rel="stylesheet">
    <style type="text/css">
        select {
            width: auto;
        }
        .link{
            color: #0000ff;
            text-decoration: underline;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="form-wrapper">
    <div class="form-title">
        <span class="ttcorner"></span>

        <h3>
            <span class="text">用户登录统计</span>
        </h3>
    </div>
    <form name="theForm">
        <input type="hidden" name="userForm.DEPT_ID" value="${userForm.DEPT_ID}"/>
    </form>
    <div class="box-in">
        <table border="0" cellspacing="0" cellpadding="0" class="table-03">
            <tr>
                <td class="monitor_bg1" height="13" align="right" nowrap>
                    查询规则：
                   <select id="queryTimeRule">
                       <option value="day">按天</option>
                       <option value="week">按周</option>
                       <option value="month">按月</option>
                   </select>
                </td>
                <td class="monitor_bg1" data-date-picker="day" style="display:none" height="13" align="right" nowrap>
                    时间选择：
                    <input type="text" class="Wdate" name="chooseTime"
                           id="chooseTimeDay"/>
                </td>
                <td class="monitor_bg1" data-date-picker="week" style="display:none" height="13" align="right" nowrap>
                    时间选择：
                    <input type="text" class="Wdate" name="chooseTime"
                           id="chooseTimeWeek"/>至
                    <input type="text" readonly class="Wdate" name="lastDate"
                           id="lastDate"/>
                </td>
                <td  class="monitor_bg1" data-date-picker="month" style="display:none" height="13" align="right" nowrap>
                    时间选择：
                    <input type="text" class="Wdate" name="chooseTime"
                           id="chooseTimeMonth"/>
                </td>
                <td class="monitor_bg1" height="13" align="right" nowrap><input type="button" class="btn-style02" id="btn-search" value="查询"/></td>
            </tr>
        </table>
    </div>
    <div class="title-style"><a class="fold-tip"></a></div>
    <div class="block02">
        <table id="gridTable">
        </table>
        <div id="gridPager">
        </div>
    </div>
    <div class="form-title">
        <span class="ttcorner"></span>
        <h3>
            <span class="text">未登录人员统计:</span>
        </h3>
    </div>
    <div class="box-in">
        <table border="0" cellspacing="0" cellpadding="0" class="table-03">
            <tr>
                <td class="monitor_bg1" height="13" align="right" nowrap>
                    查询规则：
                    <select id="queryDateRule">
                        <option value="quarter">季度</option>
                        <option value="halfYear">半年</option>
                        <option value="year">一年</option>
                    </select>
                </td>
                <td class="monitor_bg1" data-year-picker="quarter" style="display:none" height="13" align="right" nowrap>
                    时间选择：
                    <input type="text" class="Wdate" name="chooseDate"
                           id="chooseTimeQuarter"/>至
                    <input type="text" readonly class="Wdate" name="lastMonth"
                           id="lastMonthQ"/>
                </td>
                <td class="monitor_bg1" data-year-picker="halfYear" style="display:none" height="13" align="right" nowrap>
                    时间选择：
                    <input type="text" class="Wdate" name="chooseDate"
                           id="chooseTimeHalfYear"/>至
                    <input type="text" readonly class="Wdate" name="lastMonth"
                           id="lastMonthY"/>
                </td>
                <td  class="monitor_bg1" data-year-picker="year" style="display:none" height="13" align="right" nowrap>
                    时间选择：
                    <input type="text" class="Wdate" name="chooseDate"
                           id="chooseTimeYear"/>
                </td>
                <td class="monitor_bg1" height="13" align="right" nowrap><input type="button" class="btn-style02" id="btn-non-search" value="查询"/></td>
            </tr>
        </table>
    </div>
    <div class="title-style"><a class="fold-tip"></a></div>
    <div class="block02">
        <table id="nonGridTable">
        </table>
        <div id="nonGridPager">
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="<%=application.getContextPath()%>/njs/basd/common/commons.min.js"></script>
<script type="text/javascript" src="<%=application.getContextPath()%>/njs/basd/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="<%=application.getContextPath()%>/portal-api.min.js"></script>
<script type="text/javascript">
    $(function () {
        $(".title-style a.fold-tip").toggle(toggletip, toggletip);
        function toggletip() {
            if ($(this).attr("class").split("unfold-tip").length > 1) {
                $(this).removeClass("unfold-tip");
                $(this).parents().prev(".box-in").show("fast");
            } else {
                $(this).addClass("unfold-tip");
                $(this).parents().prev(".box-in").hide("fast");
            }
        }
    });

    $(function () {
        $("#nonGridTable").jqGrid({
            url: "<s:url action="nonLoginJson" namespace="/ibnms/report"/>",
            datatype: "json",
            mtype: "POST",
            height: "100%",
            autowidth: true,
            colNames: ['ID','姓名', '部门', '电话'],
            colModel: [
                {name: 'LOGIN_ID', index: 'LOGIN_ID',hidden:true},
                {name: 'NAME', index: 'NAME'},
                {
                    name: 'DEPT_NAME', index: 'DEPT_NAME'
                },
                {
                    name: 'LOGIN_PHONE', index: 'LOGIN_PHONE'
                }
            ],
            viewrecords: true,
            rowNum: 10,
            rowList: [10, 20, 30],
            jsonReader: {
                root: 'rows',
                page: 'page',
                total: 'total',
                records: 'records',
                repeatitems: false,
                subgrid: {
                    root: 'rows',
                    page: 'page',
                    total: 'total',
                    records: 'records',
                    repeatitems: false
                }
            },
            pager: "#nonGridPager",
            hidegrid: true,
            multiselect: true,
            beforeRequest: function () {
                var postData = {
                    "queryRule": $("#queryDateRule").val(),
                    "beginTime": $("input[name=chooseDate]:visible").val(),
                    "endTime": $("input[name=lastMonth]:visible").val()
                };
                $.extend($("#nonGridTable").getGridParam("postData"), postData);
            }
        });
        $("#chooseTimeDay")[0].onclick=function(){
            WdatePicker({
                dateFmt:"yyyy-MM-dd",
                highLineWeekDay:true,
                firstDayOfWeek:1,
                readOnly:true
            })
        };
        $("#chooseTimeWeek")[0].onclick=function(){
            WdatePicker({
                dateFmt:"yyyy-MM-dd",
                highLineWeekDay:true,
                firstDayOfWeek:1,
                readOnly:true,
                onpicked:function() {
                    var week=parseInt($dp.cal.getP('w','w'));
                    if(week==0){
                        $dp.$("lastDate").value=$dp.cal.getDateStr();
                        var x=$dp.$D("chooseTimeWeek",{d:-6});
                        this.value=x.y+"-"+ getTwoLengthDateStr(x.M)+"-"+ getTwoLengthDateStr(x.d);
                    }else{
                        var x=$dp.$D("chooseTimeWeek",{d:-(week-1)});
                        var lastDate=$dp.$D("chooseTimeWeek",{d:(7-week)});
                        this.value= x.y+"-"+ getTwoLengthDateStr(x.M)+"-"+ getTwoLengthDateStr(x.d);
                        $dp.$("lastDate").value=lastDate.y+"-"+ getTwoLengthDateStr(lastDate.M)+"-"+ getTwoLengthDateStr(lastDate.d);
                    }
                }
            })
        };
        $("#chooseTimeMonth")[0].onclick=function(){
            WdatePicker({
                dateFmt:"yyyy-MM",
                highLineWeekDay:true,
                firstDayOfWeek:1,
                readOnly:true
            })
        };

        $("#chooseTimeQuarter")[0].onclick=function(){
            WdatePicker({
                dateFmt:"yyyy-MM",
                highLineWeekDay:true,
                firstDayOfWeek:1,
                readOnly:true,
                onpicked:function() {
                    var month=parseInt($dp.cal.getP('M','M'));
                    var year=$dp.cal.getP("y");
                    var x=Math.floor((month/3));
                    if(month%3==0){
                        $dp.$("lastMonthQ").value=year+"-"+getTwoLengthDateStr((3*x));
                        this.value=year+"-"+getTwoLengthDateStr(((x-1)*3)+1);
                    }else{
                        this.value= year+"-"+getTwoLengthDateStr((x*3)+1);
                        $dp.$("lastMonthQ").value=year+"-"+getTwoLengthDateStr(((x+1)*3));
                    }
                }
            })
        }
        $("#chooseTimeHalfYear")[0].onclick=function(){
            WdatePicker({
                dateFmt:"yyyy-MM",
                highLineWeekDay:true,
                firstDayOfWeek:1,
                readOnly:true,
                onpicked:function() {
                    var month=parseInt($dp.cal.getP('M','M'));
                    var year=$dp.cal.getP("y");
                    if(month<=6){
                        $dp.$("lastMonthY").value=year+"-06";
                        this.value=year+"-01";
                    }else{
                        this.value= year+"-07";
                        $dp.$("lastMonthY").value=year+"-12";
                    }
                }
            })
        };
        $("#chooseTimeYear")[0].onclick=function(){
            WdatePicker({
                dateFmt:"yyyy",
                highLineWeekDay:true,
                firstDayOfWeek:1,
                readOnly:true
            })
        };
        $("#queryTimeRule").change(function(){
            var rule=$(this).val();
            var current=$("td[data-date-picker="+rule+"]");
            if(current.is(":visible")){
                return;
            }
            var rule=$(this).val();
            $("td[data-date-picker]").hide();
            current.show().find("input").val("");
        }).change();
        $("#queryDateRule").change(function(){
            var rule=$(this).val();
            var current=$("td[data-year-picker="+rule+"]");
            if(current.is(":visible")){
                return;
            }
            var rule=$(this).val();
            $("td[data-year-picker]").hide();
            current.show().find("input").val("");
        }).change();
        $("#chooseTimeDay").val(currentTime());
        $("#btn-search").click(function () {
            $("#gridTable").trigger("reloadGrid", [{page: 1}]);
        });
        $("#btn-non-search").click(function () {
            $("#nonGridTable").trigger("reloadGrid", [{page: 1}]);
        });
        $("#gridTable").jqGrid({
            url: "<s:url action="loginReportJson" namespace="/ibnms/report"/>",
            datatype: "json",
            mtype: "POST",
            height: "100%",
            autowidth: true,
            colNames: ['ID','姓名', '部门', '登录次数'],
            colModel: [
                {name: 'LOGIN_ID', index: 'LOGIN_ID',hidden:true},
                {name: 'USER_NAME', index: 'USER_NAME'},
                {
                    name: 'DEPT_NAME', index: 'DEPT_NAME'
                },
                {
                    name: 'LOGIN_COUNT', index: 'LOGIN_COUNT',formatter:function(val,index,row){
                    return '<span class="link" onclick="getLoginList(\''+row.LOGIN_ID+'\')" >'+val+'</span>';
                }
                }
            ],
            viewrecords: true,
            rowNum: 10,
            rowList: [10, 20, 30],
            jsonReader: {
                root: 'rows',
                page: 'page',
                total: 'total',
                records: 'records',
                repeatitems: false,
                subgrid: {
                    root: 'rows',
                    page: 'page',
                    total: 'total',
                    records: 'records',
                    repeatitems: false
                }
            },
            pager: "#gridPager",
            hidegrid: true,
            multiselect: true,
            beforeRequest: function () {
                var postData = {
                    "queryRule": $("#queryTimeRule").val(),
                    "beginTime": $("input[name=chooseTime]:visible").val(),
                    "endTime": $("#lastDate").val()
                };
                $.extend($("#gridTable").getGridParam("postData"), postData);
            }
        });
    });
    function getTwoLengthDateStr(val){
        if(typeof val!="string"){
            val=val+"";
        }
        if(val.length==2){
            return val;
        }else{
            return "0"+val;
        }
    }

    function getLoginList(obj){
        window.location.href="<%=application.getContextPath()%>/ibnms/report/loginList.action?loginId="+obj+
                "&beginTime="+$("input[name=chooseTime]:visible").val()+"&endTime="+$("#lastDate").val()+
                "&queryRule="+$("#queryTimeRule").val();
    }

    function currentTime()
    {
        var now = new Date();

        var year = now.getFullYear();       //年
        var month = now.getMonth() + 1;     //月
        var day = now.getDate();            //日

        var hh = now.getHours();            //时
        var mm = now.getMinutes();          //分

        var clock = year + "-";

        if(month < 10)
            clock += "0";

        clock += month + "-";

        if(day < 10)
            clock += "0";

        clock += day;
        return clock;
    }
</script>
</html>
